<template>
  <div>
    <div v-for="n in count" :key="n" class="mb-[1rem]">
      <AppBaseSkeletonCard v-if="type === 'card'"/>
      <AppBaseSkeletonForm v-else-if="type === 'form'" />
      <AppBaseSkeletonCardGrid v-else-if="type === 'grid'" :columnCount="columnCount"/>
      <AppBaseSkeletonParagraph v-else />
    </div>
  </div>
</template>

<script lang="ts" setup>
interface Props {
  type?: 'card' | 'form' | 'paragraph' | 'grid'
  count?: number
  columnCount?: number
}

const props = withDefaults(defineProps<Props>(), {
  type: 'card',
  count: 3,
  columnCount: 1
})
</script>
